<template>
  <view>
    <!-- <TopActionBar /> -->
    <PagesContainer has-custom-navbar scroll-container>
      <view class="p-20rpx">
        <u-swiper
          :list="swiperList"
          height="300rpx"
          radius="16rpx"
          indicator
          indicator-mode="dot"
          autoplay
          circular
        />

        <!-- <view class="menu-container mt-30rpx ">
          <view
            v-for="menu in menuList"
            :key="menu.key"
            class="menu-item col-4"
            @click="handleMenuClick(menu)"
          >
            <u-icon :name="menu.icon" size="60rpx" />
            <text class="menu-text">{{ menu.title }}</text>
          </view>
        </view> -->

        <view class="card-container mt-30rpx">
          <view class="-mt-20rpx -mx-10rpx">
            <u-tabs
              :list="newsTabList"
              line-color="#386EE8"
              line-width="40rpx"
              line-height="10rpx"
              :item-style="{ height: '96rpx' }"
              :active-style="{ color: '#333', fontSize: '36rpx' }"
              :inactive-style="{ color: '#999', fontSize: '32rpx' }"
              @change="tabChange"
            />
          </view>

          <view v-if="tabActive === 0" class="news-list">
            <view class="w-full flex mb-20rpx">
              <u-button
                text="刷新"
                :color="userInfo.Permission === 'admin' ? '' : '#386ee8'"
                :customStyle="{
                  width: userInfo.Permission === 'admin' ? '33%' : '100%',
                  marginRight: '10px'
                }"
                @click="getData"
              />
              <u-button
                v-if="userInfo.Permission === 'admin'"
                text="新增"
                color="#386ee8"
                :throttle-time="600"
                @click="handleAdd('0')"
              />
            </view>
            <view v-if="appearanceList.length" class="overflow-auto h-780rpx">
              <view
                v-for="news in appearanceList"
                :key="news.RecordId"
                class="news-item"
                @click="handle2Detail(news, '1')"
              >
                <view class="news-content">
                  <text class="news-title line-clamp-2">
                    {{ news.Comments }}
                  </text>
                  <view class="news-info">
                    <text class="news-time">{{ news.CheckDate }}</text>
                    <text class="news-time">
                      {{ news.Department + '-' + news.Name }}
                    </text>
                  </view>
                </view>
                <view class="news-img">
                  <u-image
                    :src="news.img"
                    width="160rpx"
                    height="160rpx"
                    radius="10rpx"
                  />
                </view>
              </view>
            </view>
            <u-empty v-else mode="data" />
          </view>
          <view v-if="tabActive === 1" class="news-list">
            <view class="w-full mb-20rpx flex">
              <div
                v-for="menu in menuList1"
                :key="menu"
                class="flex flex-col justify-center mr-20px items-center"
                @click="handleMenuClick(menu)"
              >
                <view class="w-60px h-60px flex justify-center items-center">
                  <image
                    :src="menu.icon"
                    class="rounded-8px w-36px h-36px"
                  ></image>
                </view>

                <span class="text-first text-13px mt-6px">
                  {{ menu.title }}
                </span>
              </div>
            </view>
          </view>
          <view v-if="tabActive === 2" class="news-list">
            <view class="w-full mb-20rpx flex">
              <div
                v-for="menu in menuList2"
                :key="menu"
                class="flex flex-col justify-center mr-20px items-center"
                @click="handleMenuClick(menu)"
              >
                <view class="w-60px h-60px flex justify-center items-center">
                  <image
                    :src="menu.icon"
                    class="rounded-8px w-36px h-36px"
                  ></image>
                </view>
                <span class="text-first text-13px mt-6px">
                  {{ menu.title }}
                </span>
              </div>
            </view>
          </view>
        </view>
      </view>
    </PagesContainer>
  </view>
</template>

<script lang="ts">
import dayjs from 'dayjs'
import { Component, Vue } from 'vue-property-decorator'

import PagesContainer from '@/components/pages-container/pages-container.vue'
import TopActionBar from '@/components/top-action-bar.vue'
import { userStore } from '@/store'
import { showToast } from '@/utils/helper/uniHelper'
import { getAppearanceRecordsApi } from './service'

@Component({ name: 'Index', components: { PagesContainer, TopActionBar } })
export default class Index extends Vue {
  // handleTest() {
  //   openMiniAppHelper(
  //     {
  //       queryData: {
  //         name: '彭强',
  //         idCard: '362426199711276418',
  //         phone: 13247066121
  //       },
  //       extraData: {
  //         token: userStore.getToken
  //       }
  //     },
  //     {
  //       envVersion: 'develop'
  //     }
  //   )
  // }

  get userInfo(): any {
    return userStore.userInfo || {}
  }

  swiperList = ['/static/index/neiwu.png', '/static/index/neiwu2.png']

  menuList1: MenuItem[] = [
    {
      key: 'menu-1',
      title: '值班管理',
      icon: '/static/8.gif',
      url: '/pages/on-guard/index',
      type: 'page'
    },
    {
      key: 'menu-2',
      title: '请假管理',
      icon: '/static/9.gif',
      url: '/pages/on-guard/holidays',
      type: 'page'
    }
  ]

  menuList2: MenuItem[] = [
    {
      key: 'menu-11',
      title: '采购',
      icon: '/static/10.gif',
      url: '/pages/on-guard/purchase',
      type: 'page'
    },
    {
      key: 'menu-12',
      title: '涉案',
      icon: '/static/11.gif',
      url: '/pages/on-guard/caseThing',
      type: 'page'
    },
    {
      key: 'menu-13',
      title: '领用',
      icon: '/static/12.gif',
      url: '/pages/on-guard/receive',
      type: 'page'
    }
  ]

  handleMenuClick(item: MenuItem | null) {
    if (!item) return
    if (!item.url) return showToast('功能开发中，敬请期待')

    switch (item.type) {
      case 'page':
        uni.navigateTo({
          url: item.url
        })
        break
      case 'webview':
        uni.navigateTo({
          url: `/pages/webview/index?url=${item.url}`
        })
        break
      default:
        break
    }
  }

  tabActive = 0
  newsTabList = [
    { name: '仪容仪表' },
    { name: '值班考勤' },
    { name: '物品管理' }
  ]

  appearanceList: Recordable[] = []

  handle2Detail(item: Recordable, type: string) {
    console.log(' ', item)
    uni.navigateTo({
      url: `/pages/form/index?type=${type}&view=view&RecordId=${item.RecordId}`
    })
  }

  tabChange({ index }: any) {
    this.tabActive = index
  }

  handleAdd(type: string, view = '') {
    uni.navigateTo({
      url: `/pages/form/index?type=${type}&view=${view}`
    })
  }

  async getData() {
    try {
      if (this.tabActive === 0) {
        const { OfficerID, Permission }: any = this.userInfo ?? {}
        const { records } = await getAppearanceRecordsApi({
          OfficerID: Permission === 'user' ? OfficerID : ''
        })
        this.appearanceList = records.map((i: any) => ({
          ...i,
          img:
            'https://api.gamestrial.com/xcx_file/' +
            (i.FileList?.split(',')[0] || '1741619394794-128600494.jpg'),
          CheckDate: dayjs(i.CheckDate).format('YYYY-MM-DD HH:mm:ss')
        }))
      }
    } catch (error) {
      console.log('error', error)
    }
  }

  async onLoad() {
    uni.showShareMenu({
      menus: ['shareAppMessage', 'shareTimeline']
    })
  }

  async onShow() {
    await this.getData()
  }
}
</script>

<style lang="scss" scoped>
.menu-text {
  font-weight: 400;
  font-size: $font-size-sm;
  line-height: 36rpx;
  margin-top: 10rpx;
  color: $color-first-text;
}

.news-list {
  margin-top: $space-base;
  position: relative;
  .news-item {
    display: flex;
    padding: $space-base 0;
    border-bottom: 1rpx solid #f2f2f2;

    .news-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 160rpx;
      padding: 10rpx 0;

      .news-title {
        font-weight: 500;
        font-size: $font-size-xl;
        line-height: 46rpx;
        color: $color-first-text;
      }

      .news-desc {
        margin-top: 10rpx;
        font-size: $font-size-sm;
        line-height: 36rpx;
        color: $color-third-text;
      }

      .news-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10rpx;

        .news-time {
          font-size: $font-size-xs;
          line-height: 34rpx;
          color: $color-third-text;
        }
      }
    }

    .news-img {
      padding-left: $space-base;
    }
  }
}
</style>
